form#tarificadorUnPaso{container-type: inline-size; container-name: form-container; background:#fff; padding:25px 18px 20px; border-radius:10px; box-shadow:5px 5px 15px rgba(0,0,0,0.2); display:flex; flex-wrap:wrap; margin:15px; max-width:800px}

  form>*:not(style) {
    margin: 0 auto;
    display: block;
  }

  form .groupForm{width:50%; text-align:left; margin-bottom:0.8rem; padding:0px 0.4rem;}
  form .groupForm.groupForm-lopd {width:100%}
  .titleFormu{width:100%; font-size:24px; margin-bottom:15px}
  form input[type="text"], form input[type="email"], form input[type="tel"],form input[type="number"], form select{width:100%; padding:15px; box-sizing:border-box; font-size:16px; color:#000;min-height: 48px; border-radius: 5px; }
  .groupForm.groupFormCantidad{width:100%; align-items:center; margin:0px 0.4rem 0.8rem}
  .mesRenovacionGroup, .groupFormCantidad{flex-direction: row;}
  h4.titleFormu{font-size:18px; width:50%; margin-top:0px;}
  .banner p:first-child.texto-limitado{text-align:justify; height:60px; margin-bottom:15px; font-size:12px !important}
  .cont-lopd{display:flex; align-items:start}
  .groupForm.groupForm-localidad{width:100%}
  .groupForm, .groupFormCantidad{gap:0px}
  form label{margin-bottom:0px; line-height:100%}
  .aseguradoItem{padding:0px; box-shadow:none; border:none; flex:none; width:22%}
  .aseguradoItem input[type="text"]{padding:10px}
  .groupFormCantidad{border-top:none; background-color:#f6f6f6; padding:10px !important; border-radius:5px}
  .aseguradoItem:hover{box-shadow:none}
  form .groupForm.groupForm-fecha, form .groupForm.groupForm-tel, form .groupForm.mesRenovacionGroup, 
  form .groupForm.groupForm-cp{width:33%;}
  form .groupForm.groupForm-localidad{width:66%}
  .elementFormuCantidad{flex:37%; text-align:center}
  #aseguradosContainer{justify-content: flex-start;}
  div#lopd label{margin-top:0px}
  #idprotecciondatos{width:26px; margin-top:5px}
  .cont-lopd label{font-weight:normal}



  .groupForm,
  .groupFormCantidad {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .mesRenovacionGroup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .elementFormu {
    flex: 50%;
    display: flex;
    flex-direction: column;
  }

  label {
    margin-bottom: 8px;
    font-size: 0.95rem;
  }

  input,
  select {
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.25s ease;
    background-color: #fff;
  }

  

  .groupFormCantidad {padding-top: 30px;}

  .elementFormuCantidad select {
    width: 100px; margin:auto

  }
  .elementFormuCantidad label{text-align:center}

  #aseguradosContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 0px 10px;
    margin-top: 0px;
   transition: all 0.3s ease-in-out;
   width:100%
  }
  select #cantidadAsegurados{height:38px;min-height: 38px;}


  .aseguradoItem input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 1rem;
    transition: all 0.2s ease;
  }

  

  /* Animación suave al aparecer los nuevos inputs */
  #aseguradosContainer .aseguradoItem {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeIn 0.3s ease forwards;
  }

  @keyframes fadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
	.texto-limitadoForm {
	  max-height: 65px; 
	  font-size: 12px !important;
	  overflow-y: auto;      
	  padding: 8px;
	  border: 1px solid #ccc;
	  background: #fafafa;
    margin:0px 0.8rem 15px;
    width:96%;  
	}
	#idprotecciondatos{
		min-width: 25px; 
		margin-right:10px; 
		appearance: auto !important;
    transform: scale(1.5);
	}


	div#lopd label {
	    width: 80%;
	    text-align: left;
	    font-size: 11px;
	    
	}
  
  .loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Fondo semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    pointer-events: all;
    /* Bloquea interacciones */
  }

  .loader {
    width: 48px;
    height: 48px;
    margin: auto;
    position: relative;
  }

  .loader:before {
    content: '';
    width: 48px;
    height: 5px;
    background: #000;
    opacity: 0.25;
    position: absolute;
    top: 60px;
    left: 0;
    border-radius: 50%;
    animation: shadow 0.5s linear infinite;
  }

  .loader:after {
    content: '';
    width: 100%;
    height: 100%;
    background: #89b85dff;
    animation: bxSpin 0.5s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
  }

  @keyframes bxSpin {
    17% {
      border-bottom-right-radius: 3px;
    }

    25% {
      transform: translateY(9px) rotate(22.5deg);
    }

    50% {
      transform: translateY(18px) scale(1, .9) rotate(45deg);
      border-bottom-right-radius: 40px;
    }

    75% {
      transform: translateY(9px) rotate(67.5deg);
    }

    100% {
      transform: translateY(0) rotate(90deg);
    }
  }

  @keyframes shadow {

    0%,
    100% {
      transform: scale(1, 1);
    }

    50% {
      transform: scale(1.2, 1);
    }
  }

  @media (max-width: 768px) {

    .elementFormu,
    .elementFormuCantidad {
      max-width: 100%;
    }

    #aseguradosContainer {
      align-items: center;
    }

    .aseguradoItem {
      max-width: 100%;
    }
  }

  form#tarificadorUnPaso button,
  form#tarificadorUnPaso input[type="submit"] {
    display: block;
    margin: 15px auto 0;
    color: #fff;
    border: none;
    padding: 14px 35px;
    border-radius: 10px;
    font-size: 21px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  div#aseguradosContainer label{font-weight:normal; font-size:14px}

 

/************* FORM SMALL*************************************************/ 
@container form-container (max-width: 350px) {
form{padding:15px 8px 30px; margin:0px}
form .groupForm, form .groupForm.groupForm-fecha, form .groupForm.groupForm-tel,
form .groupForm.mesRenovacionGroup, form .groupForm.groupForm-cp, form .groupForm.groupForm-localidad{width:100% }
form .groupForm.groupForm-fecha, form .groupForm.groupForm-tel, form .groupForm.mesRenovacionGroup, form .groupForm.groupForm-cp {
    width: 50%;}
form .groupForm label{height:30px}

h4.titleFormu{width:100%; text-align:center}
.aseguradoItem{width: 47%;}

  }

  /************* FORM MEDIUM *************************************************/ 
@container form-container (min-width: 351px) and (max-width: 550px) {
  form {background:red}
  form .groupForm.groupForm-fecha, form .groupForm.groupForm-tel, form .groupForm.mesRenovacionGroup, form .groupForm.groupForm-cp {
    width: 33%;}
form .groupForm label{height:30px}

    
.aseguradoItem{width: 30%;}

  }

  /************* FORM LARGE *************************************************/ 
@container form-container (min-width: 551px) {
form{padding:15px 8px 30px; margin:0px}
form .groupForm, form .groupForm.groupForm-fecha, form .groupForm.groupForm-tel,
form .groupForm.mesRenovacionGroup, form .groupForm.groupForm-cp, form .groupForm.groupForm-localidad{width:50%}
  form .groupForm.groupForm-fecha, form .groupForm.groupForm-tel, form .groupForm.mesRenovacionGroup, form .groupForm.groupForm-cp {
    width: 33%;}
h4.titleFormu{width:60%; text-align:center; margin-bottom:0px}
.elementFormuCantidad{width:37%}
.aseguradoItem{width: 22.75%;}
form .groupForm.groupForm-localidad {width: 66%}
}




/**********MÓVIL********************************************/
@media only screen and (max-width: 575px) {

form{margin:0px; padding:15px 8px}



}